<template>
	<div>
		<el-button @click="dialogFormVisible = true" type="primary">新增有赞店铺</el-button>
		<br>
		<br>
		<el-table
		:data="tableData"
		v-loading="loading"
		:stripe="true"
		:border=true
		style="width: 100%" >
			<el-table-column prop="id" label="ID" width="60"></el-table-column>
			<el-table-column prop="mallName" label="店铺名称" width="160"></el-table-column>
			<el-table-column prop="shopNo" label="店铺编号" width="100"></el-table-column>
			<el-table-column prop="shipper" label="店铺发货姓名" width="160"></el-table-column>
			<el-table-column prop="shipperPhone" label="店铺发货电话" width="110"></el-table-column>
			<el-table-column prop="type" label="店铺类型" width="100"></el-table-column>
			<el-table-column prop="cbeCode" label="cbeCode" width="120"></el-table-column>
			<el-table-column prop="cbeName" label="cbeName" width="220"></el-table-column>
			<el-table-column prop="status" label="状态" width="100">
				<template slot-scope="scope">
					<span style="color:#67C23A;" v-if="scope.row.status == true">正常</span>
					<span style="color:#F56C6C;" v-else>禁用</span>
			  </template>
			</el-table-column>
			<el-table-column prop="notes" label="备注" width="120"></el-table-column>
			<el-table-column prop="isMoreStore" label="是否多仓只处理以zz开头的订单">
				<template slot-scope="scope">
					<span style="color:#67C23A;" v-if="scope.row.isMoreStore == true">正常</span>
					<span style="color:#F56C6C;" v-else>禁用</span>
			  </template>
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="150">
				<template slot-scope="scope">
					<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button size="mini" type="danger" :disabled="!scope.row.status" @click="handleStatus(scope.$index, scope.row)">禁用</el-button>
				</template>
			</el-table-column>
		</el-table>

		<div class="block" style="margin-top: 20px;">
		    <el-pagination
		      @size-change="handleSizeChange"
		      @current-change="handleCurrentChange"
		      :current-page="currentPage"
		      :page-sizes="[15, 50, 100, 200]"
		      :page-size="pageSize"
		      layout="total, sizes, prev, pager, next, jumper"
		      :total="totalRow">
		    </el-pagination>
		</div>

		<el-dialog width="650px" title="新增有赞店铺" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="form" :label-width="formLabelWidth">
        <el-form-item label="店铺ID" prop="ownerId">
          <el-input v-model="form.ownerId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="client_id" prop="client_id">
          <el-input v-model="form.client_id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="client_secret" prop="client_secret">
          <el-input v-model="form.client_secret" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveNewShop('form')">确 定</el-button>
      </div>
    </el-dialog>

	</div>
</template>

<script>
	import { getUserList, updateField, saveYZShop } from '../../api/apis'
  export default {
    data() {
      return {
      	formInline: {
          user: '',
          region: ''
				},
				loading: true,
      	tableData: [],
				currentPage: 1,
	      pageSize: 15,
				totalRow: 0,
				dialogFormVisible: false,
				formLabelWidth: '120px',
				form: {
          ownerId: '',
          client_id: '',
          client_secret: ''
				},
				rules: {
          ownerId: [
            { required: true, message: '请输入店铺ID', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10个字符', trigger: 'blur' }
					],
					client_id: [
            { required: true, message: '请输入client_id', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 6 到 10个字符', trigger: 'blur' }
					],
					client_secret: [
            { required: true, message: '请输入client_secret', trigger: 'blur' },
            { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
          ]
        }
      }
		},
		created: function () {
			if(this.$route.query.pageNum){
				this.currentPage = parseInt(this.$route.query.pageNum);
			}
			this.handleCurrentChange(this.currentPage);
	  },
    methods: {
			//新增有赞店铺
			saveNewShop(form){
				this.$refs[form].validate( async(valid) => {
					if (valid) {
						saveYZShop(this.form).then( (res) =>{
							if(res.status === 200 ){
								if(res.data.code == 0){
									this.$message({
										type: 'success',
										message: '新增店铺成功!'
									});
									this.dialogFormVisible = false;
									this.handleCurrentChange(1);
								}else{
									this.$message.error(res.data.msg)
								}
							}
						})
						.catch(function (error) {
							console.log(error);
						});
					}
				})
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.handleCurrentChange(1);
			},
			handleCurrentChange(val) {
				this.loading = true;
				this.currentPage = val;
				let that = this;
				let data = {
					pageNum: val,
					limit: this.pageSize
				}
				getUserList(data).then(function (res) {
					if(res.status === 200 ){
						if(res.data.code == 0){
							that.totalRow = res.data.count;
							that.tableData = res.data.data;
						}else{
							that.$message.error(res.data.msg)
						}
					}
					that.loading = false;
				})
				.catch(function (error) {
					console.log(error);
				});
			},
			detail(index, row) {
				let  that = this;
				this.dialogTableVisible = true;
				let para = {"orderNo":row.orderNo}
				getOrderGoods(para).then(function (res) {
					if(res.status === 200 ){
						if(res.data.code == 0){
							that.gridData = res.data.data;
						}else{
							that.$message.error(res.data.msg)
						}
					}
				})
				.catch(function (error) {
						console.log(error);
				});
			}, 
    	handleEdit(index, row) {
				// console.log(index, row);
				this.$router.push({
					path:'/editUser',
					query:{ 
						items: row ,
						pageNum: this.currentPage
					}
				});
	    },
	    handleStatus(index, row) {
				var that = this;
				this.$confirm('确认要禁用该客户吗?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
				}).then(() => {
					const para = {
						id: row.id,
						field: "status",
						value: false
					}
					updateField(para).then(function (res) {
						console.log(res)
						if(res.status === 200 ){
							if(res.data.code == 0){
								this.$message({
										type: 'success',
										message: '已禁用!'
								});
								that.handleCurrentChange(that.currentPage);
							}else{
								that.$message.error(res.data.msg)
							}
						}
					})
					.catch(function (error) {
							console.log(error);
					});
				}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消操作'
						});          
				});	
			},
			
		},
		mounted(){
			// console.log(this.$route.query.pageNum);
		}
  }
</script>
 